<template>
  <!-- :style="hstyle" -->
  <div class="header">
    <div class="headerin">
      <div class="log" @click="this.$router.push('/index')" style="cursor: pointer">
        <img src="../assets/img/huan.gif" alt="">
      </div>
      <div class="category" @click="muluyangs()">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-mulu"></use>
        </svg>
        目录
      </div>
      <div class="search">
        <input class="input" placeholder="请输入搜索内容" :value="inputvalue"   @change="inputchange"  @keyup.enter="searchBtnClick">
        <!-- <input class="input" :placeholder="commonSearchFileIsCache" v-else> -->
        <div class="btn" @click="searchBtnClick">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-sousuo"></use>
          </svg>
        </div>
      </div>
      <div class="icon-btn-list">
        <div class="collect-icon" @click="changecollect()">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shoucang"></use>
          </svg>
          收藏
          <div v-show="isLogined" class="collect"> {{ gscvalue }} </div>
        </div>
        <div class="shopping-icon" @click="changeshopping()">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shouye"></use>
          </svg>
          购物车
          <div v-show="isLogined" class="shopping"> {{ gwcvalue }} </div>
        </div>
        <div class="jifeng-icon">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-jifenshangcheng"></use>
          </svg>
          <span v-show="isLogined" class="jifi" :content="jifengvalue">积分: {{ jifengvalue }}</span> 
          <span v-show="!isLogined">积分: 0 </span>
        </div>
        <div class="login-btn">
          <!-- 未登录成功时显示登录 -->
          <span  v-show="!isLogined"  @click="changeisshowlogin(true)">
            <svg class="icon login-img" aria-hidden="true">
              <use xlink:href="#icon-denglu"></use>
            </svg>
            <!-- <span class="iconfont icon-denglu"></span> -->
            登录
          </span>
          <!-- 登录成功后显示用户信息 -->
          <span v-show="isLogined" @click="changeisshowtclogin(true)">
            <img :src="userInfo.headImg" alt="" class="imag">
            {{userInfo.nickName}}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState,mapMutations,mapActions,mapGetters } from 'vuex';
import {WeixinLoginAPI} from "@/request/api"
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Tobu',
  data () {
    return {
      inputvalue:'梅子熟了',
        // hstyle:{},
    }
  },
  created(){
    this.asyncshopping();
    // 有可能在创建的时候还拿不到code,所以等页面所有工作准备完毕之后再去获取这个code
    setTimeout(async ()=>{
      
      // 判断地址栏有没有code
      let mycode = this.$route.query.code
      console.log(mycode);      
      if(mycode){
        // 发起微信扫码登录的请求
        let res = await WeixinLoginAPI({
          code:mycode
        })        
        // 针对这3种情况做不同的处理
        if(res.code==0){
          // 微信扫码登录成功
          // 1 提示登录成功
          this.asyncChangeIsShowToast({
            msg:"登录成功!",
            type: "success"
          });
          // 3 保存token值
          localStorage.setItem("x-auth-token", res["x-auth-token"])
          // // 4 登录状态的切换 (登录成功之后,要显示昵称,头像, 购物车按钮...)
          // this.chanIsLogined(true);
     
          // 登录成功之后,地址栏上的code
          this.$router.push(this.$route.path)

          // // 登录成功,发送获取用户信息的请求
          // this.asyncChanUserInfo()
          
        }else if(res.code==400){
          // code 失效的情况

          // 1 提示用户重新扫二维码
          this.asyncChangeIsShowToast({
            msg:"code失效,请重新扫码登录",
            type:"warning"
          })
          // 2 把登录框打开
          this.changeisshowlogin(true);
        }else if(res.code==407){
          console.log(res);
          // {code: 407, message: '现在申请获取你微信绑定的手机号码', uuid: 'f3f816fc-afc3-435f-aaa0-c9ce849cf4c6'}

          // 这个微信号,在这个网上还没有绑定手机号
          // 绑定手机号. 怎么绑定手机号??
          // 就让用户重新用手机号登录,而我们的登录接口调用的应该是 手机绑定微信 的接口(带上uuid)

          // 1 提示用户手机号绑定微信
          this.asyncChangeIsShowToast({
            msg:"请使用手机号绑定登录微信!",
            type:"warning"
          })
          // 2 把登录框打开
          this.changeisshowlogin(true)
          // 3 保存uuid到本地存储
          localStorage.setItem("uuid", res.uuid)
        }
      }
      else{
        // 没有code的情况是什么情况??
        // 1 用户没有扫码登录的操作   或者 2 在加载这个页面的时候,用户已经是登录的了

        let mytoken = localStorage.getItem("x-auth-token");
        // 根据是否有token值来更新用户的登录状态
        this.changeIsLogined(Boolean(mytoken));
        
        if(mytoken){
          this.asyncChangeUserInfo();
        }else{
          // 没有登录的情况,把用户数据初始化
          this.initUserInfo()
        }
      }
    },100)    
  },
  //全局数据vuex中state
  computed: {
    ...mapState({
      jifengvalue:state => state.jifeng.jifengvalue,
      gwcvalue:state => state.gwc.gwcvalue,
      gscvalue:state => state.gsc.gscvalue,
      isLogined:state=>state.loginzt.isLogined,
      userInfo:state=>state.userinfo.userInfo, 
    })
    // ...mapGetters({
    //   gwcvalue:"gwc/gwcvalue"
    // })
  },

  methods:{
    ...mapMutations({
       changeisshowlogin:"login/changeisshowlogin",
       changeisshowtclogin:"tclogin/changeisshowtclogin",
       // 登录状态
       changeIsLogined:"loginzt/changeIsLogined",
       initUserInfo:"userinfo/initUserInfo"
    }),
    ...mapActions({
        // 登录提示语是否显示
        asyncChangeIsShowToast:"logintoast/asyncChangeIsShowToast",
        asyncChangeUserInfo:"userinfo/asyncChangeUserInfo",
        asyncshopping:"gwc/shopping"
      }),
    // 点击时可以改变头部的样式
    muluyangs(){
      this.$router.push('/mulu');
      // this.hstyle = {
      //   position: 'absolute',
      //   background: 'rgba(255, 255, 255, 1)'
      // }
    },
    // 获取输入框的输入值
    inputchange(e){
      this.inputvalue = e.target.value
    },
    searchBtnClick(){
      if (this.inputvalue.trim().length <= 0) {
        this.asyncChangeIsShowToast({
          msg:"文本框内容不能为空!",
          type:"warning"
        })
        return;
      }

      this.$router.push("/search/"+this.inputvalue+"/")
    },
    changecollect(){
      if( !this.isLogined ){
        this.changeisshowlogin(true)
      }else{
        this.$router.push('/collect');
      }
    },
    changeshopping(){
      if( !this.isLogined ){
        this.changeisshowlogin(true)
      }else{
        this.$router.push('/shopping');
      }
    }
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  lang = "less" scoped>
.header{
    position: fixed;
    top:0px;
    background-color: rgba(255, 255, 255);
    z-index:2;
    height: 100px;
    font-size: 16px;
    width:100%;
  .headerin{
    height: 100px;
    margin-left:56.453px;
    margin-top: 0px;
    margin-right: 0px;
    align-items: center;
    width:90.03%;
    .log{
      background-size: 13% 100px;
      width: 13%;
      height: 50px;
      cursor: pointer;
      float: left;
      margin-left: 10px;
      margin-right: 10px;
      padding:20px 0 30px 0;
      line-height:100px;   
      img{
        width:100%;
        height:50px;
        // vertical-align:middle;
        border-style: none;
      }
    }
    .category{
      font-family: "azpopo";
      width: 6.5%;
      font-size: 20px;
      height: 100px;
      line-height: 100px;
      margin-left: 30px;
      float: left;
      text-align: center;
      align-items: center;
      cursor: pointer;
      .icon{
        height:24px;
        width: 24px;
      }
    }
    .search{
      width:31%;
      margin-left: 30px;  
      height: 100px;   
      float: left;
      line-height: 100px;
      .input{
        font-family: "azpopo";
        float: left;
        width: 75%;
        height: 48px;
        padding: 0 15.2px;
        margin: 26px 0;
        background-color: rgb(245, 245, 245);
        text-align: left;
        color: #856437;
        font-size: 20px;
        border-radius: 5px 0 0 5px;
        border: None;
        outline: None;
      }
      .btn{
        margin: 26px 0;
        float: left;
        width: 13%;
        height: 48px;
        line-height: 48px;
        background-color: #856437;
        border: None;
        border-radius: 0 5px 5px 0;
        background-size: 100%;
        cursor: pointer;
        .icon{
          height:24px;
          width: 24px;
          fill:white;
          vertical-align: middle;
          // vertical-align: 18px;
          // 基线线上移动18px
        }
      }
    }
    .icon-btn-list{
      position: relative;
      float: right;
      width: 42%;
      height: 100px;
      text-align: center;
      // line-height: 100px;
      .collect-icon{
        font-family: "azpopo";
        float: left;
        height: 100px;
        width: 80px;
        margin-left: 15px;
        font-size: 20px;
        line-height: 100px;
        // 小手鼠标
        cursor: pointer;
        .icon{
          height:24px;
          width: 24px;
        }
        .collect{
          // width:20px;
          padding-left:8px;
          padding-right:8px;
          height: 20px;
          line-height: 20px;
          background-color: red;
          border-radius:20px 20px 20px 20px;
          position: absolute;
          left:80px;
          top:28px;
          font-size: 15px;
          color:white;
        }
      }
      .shopping-icon{
        font-family: "azpopo";
        float: left;
        height: 100px;
        width: 100px;
        margin-left: 15px;
        font-size: 20px;
        line-height: 100px;
        // 小手鼠标
        cursor: pointer;
        .icon{
          height:24px;
          width: 24px;
        }
        .shopping{
          // width:20px;
          padding-left:8px;
          padding-right:8px;
          height: 20px;
          line-height: 20px;
          background-color: red;
          border-radius:20px 20px 20px 20px;
          position: absolute;
          left:193px;
          top:28px;
          font-size: 15px;
          color:white;
        }
      }
      .jifeng-icon{
        position: relative;
        // 小手鼠标
        cursor: pointer;
        font-family: "azpopo";
        float: left;
        height: 100px;
        width: 171px;
        margin-left: 15px;
        font-size: 20px;
        line-height: 100px;
        text-align: left;
        white-space:nowrap;
        overflow:hidden;//父元素设置了溢出隐藏，所以before无法显示
        text-overflow:ellipsis;
        // 强制一行显示，隐藏加省略号才有省略号
        .icon{
          height:24px;
          width: 24px;
        }
        // 块级继承父元素所有的东西
        .jifi::before{
          font-size:16px;
          line-height:22px;
          content:"共"attr(content)"积分";  //attr（）获得标签属性，动态属性可以写入全局数据
          display:block;//块级默认为父元素的宽高
          white-space:nowrap;
          position: absolute;
          bottom:0px;
          left:0px;
          width:153px;
          padding:0 5px;
          border: 4px  solid #856437 ;
          border-radius:8px;
          display:none;
          text-align: center;
        }
        .jifi::after{
          // 三角
          font-size:16px;
          line-height:22px;
          position: absolute;
          content:'';
          border: 8px  solid transparent ;
          border-bottom-color:#856437;
          display:none;
          bottom:28px;
          left:40%;
        }
        .jifi:hover::before{
          display:block;
        }
        .jifi:hover::after{
          display:block;
        }
      }
      .login-btn{
        cursor: pointer;
        font-family: "azpopo";
        position: absolute;
        text-align: center;
        font-size: 20px;
        right: 0px;
        margin-left:10px;
        width:120px;
        height: 100px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        span{
          line-height: 100px;
          background-color: transparent;
          color: black;
          text-decoration: none;
        //  字体图标不需要居中，有自带的css保证图片与文字居中
          .icon{
            height:30px;
            width: 30px;
            fill:rgb(133, 122, 122);    
          }
          .imag{
            vertical-align: -0.5em;
            height:40px;
            width: 40px;
            border-radius:50%;
          }
        }
        
        // .iconfont{
        //   height:28px;
        //   width: 28px;
        //   fill:red;
        // }
      }
    }
  }  
}
</style>
